<template>
    <ul class="home_list">
        <li v-for="(item, index) in list" :key="index">
            <img :src="item.imgUrl" alt="">
            <p>{{ item.title }}</p>
        </li>
    </ul>
</template>

<script setup>
import { reactive } from 'vue'
let list = reactive(
    [
        {
            "title": "链猫精品",
            "imgUrl": "../svg-icons/svgs/chain-cat-boutique.svg"
        },
        {
            "title": "CM专区",
            "imgUrl": "../svg-icons/svgs/cm-area.svg"
        },
        {
            "title": "领CM币",
            "imgUrl": "../svg-icons/svgs/collar-cm.svg"
        },
        {
            "title": "领券",
            "imgUrl": "../svg-icons/svgs/coupon-svg.svg"
        },
        {
            "title": "链猫会员",
            "imgUrl": "../svg-icons/svgs/chain-cat-member.svg"
        }
    ]
)
</script>

<style lang="scss" scoped>
.home_list {
    width: 100%;
    height: 126px;
    margin: 30px 0 25px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;

    li {
        width: 96px;
        height: 126px;

        img {
            width: 84px;
            height: 84px;
        }

        p {
            color: #3a3a3a;
            font-size: 24px;
            text-align: center
        }
    }
}
</style>